<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#mbb{
				width: 590px;
				height: 470px;
				/*border: 4px red solid;*/
				margin: 10px auto;
				position: relative;
				overflow: hidden;
			}
			#mbb .con{
				width: 3540px;
				height: 470px;
				/*border: 4px green solid;*/
				position: absolute;
				top: 0;
				left: 0;
			}
			#mbb .con img{
				float: left;
			}
			#mbb ul{
				position: absolute;
				bottom: 0;
				right: 0;
			}
			#mbb ul li{
				list-style: none;
				float: left;
				width:80px ;
				height: 29px;
				line-height: 29px;
				text-align: center;
				color: white;
				background: black;
				opacity: 0.4;
				font-size: 15px;
				font-family: '宋体';
				margin-left: 1px;
				margin-right: 1px;
				cursor: pointer;
			}
			#mbb ul li:hover{
				text-decoration: underline;
				color: #c00;
			}
		</style>
		<script src="jquery-3.4.1.js"></script>
		<script src='jquery.easing.1.3.js'></script>
		<script>
			//alert(590*6);
			$(function(){
				//大总管变量
				var c=0;
				//变量sta的作用是为了让定时器运行的时候不能点击
				var sta=2;//用来对应能否点击的状态：1代表不能点击，2代表能点击
				//控制自动轮播的函数
				function run(){
					c++;
					if(c==6){
						$("#mbb .con").css({'left':'0'});
						c=1;
					}
					//计算大div应该到达的left值
					var l=c*-590;
					sta=1;
					//让大div移动过去
					$("#mbb .con").animate({'left':l+'px'},400,function(){
						sta=2;
					});
					//让当前的li透明度变为0.7，兄弟元素变为0.4
					if(c==5){
						$("#mbb ul li").eq(0).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
					}
					else{
						$('#mbb ul li').eq(c).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
					}
					
				}
				//自动轮播
				var timer=setInterval(run,1000);
				var t;
				//给li加鼠标单击事件
				$('#mbb ul li').click(function(){
					if(sta==1){
						return;
					}
					clearTimeout(t);
					//清理定时器
					clearInterval(timer);
					//定时炸弹,和下面的回归函数一样
					//多出的100(400-300)毫秒是为了让点击的时候没有定时器
					t=setTimeout(function(){
						timer=setInterval(run,1000);
					},400)
					//获得当前被点击的li的序号
					c=$(this).index();
					//计算大div应该到达的left值
					var left=c*-590;
					$("#mbb .con").stop().animate({'left':left+'px'},300);
					//和上面的定时炸弹效果一样
					/*$("#mbb .con").stop().animate({'left':left+'px'},300,function(){
						timer=setInterval(run,1000);
					});*/
					//让当前的li透明度变为0.7，兄弟元素变为0.4
					$(this).css({'opacity':'0.7'}).siblings('li').css({'opacity':'0.4'});
				})
				
			})
		</script>
	</head>
	<body>
		<div id="mbb">
			<div class="con">
				<img src="img/11.jpg" alt="" />
				<img src="img/12.jpg" alt="" />
				<img src="img/13.jpg" alt="" />
				<img src="img/14.jpg" alt="" />
				<img src="img/15.jpg" alt="" />
				<img src="img/11.jpg" alt="" />
			</div>
			<div>
				<ul>
					<li style="opacity: 0.7;">个性萌包</li>
					<li>双肩出行</li>
					<li>法式风情</li>
					<li>青卷包</li>
					<li>炫彩印花</li>
				</ul>
			</div>
		</div>
	</body>
</html>
